<template>
    <div>
      <van-nav-bar title="确认订单" left-text="" left-arrow @click-left="$router.back()" />
      <!-- 自提和外送-->
      <van-cell class="myshlf">
        <template #title>
          <div class="shlf">
            <button :class="{'active':flag==1 }" @click="flag1" >自提</button>
            <button :class="{'active':flag==2 }" @click="flag2" >外送</button>
          </div>
        </template>
        <template #value>
          <div class="shlfone">
            <p>立即取餐</p>
            <span>约</span>
            <van-count-down millisecond :time="time" format="mm:ss" />
            <span>送达</span>
          </div>
        </template>
      </van-cell>
  
  
      <!-- 配送信息模块 -->
      <van-cell-group class="Delivery" >
    
        <van-cell center title="配送信息" class="Deliveryone"  @click="$router.push('/providehome')" >
          <!-- <template #value>
            <van-icon name="arrow" />
          </template> -->
          <template #label>
            <!-- 父元素渲染 -->
            <div class="">
              <van-icon name="location-o" />北京市 <van-tag plain type="primary">公司</van-tag>
              <br>
              <van-icon name="phone-o" />电话
            </div>
          </template>
        </van-cell>
  
        <!-- 订单信息 -->
             <!-- 订单信息 -->
      <div class="Deliveryordertwo">
        <h2>订单信息</h2>
        <div class="Deliveryorder" v-for="item in stores.orderData">
          <span> {{ item.goods_name }}<i>大/单粉糖/单粉奶/热</i></span>
          <b>x{{ item.goods_num }}</b>
          <span>￥{{ item.goods_price * item.goods_num }}</span>
        </div>
        </div>

      <van-cell value="内容" class="total">
        <template #value>
          <div>
            合计 <span>￥{{ total}}</span>
          </div>
        </template>

      
  
  
        </van-cell>
      </van-cell-group>
  
  <!-- 使用优惠 -->
      <van-cell-group class="pay">
        <van-cell title="使用优惠">
          <van-switch v-model="checked" active-color="#88afd5" inactive-color="#dcdee0" @change="Discount"/>
          </van-cell>
         
        <van-cell v-show="show" >
          <template #title>
            <p>使用咖啡钱包</p>
            <b>充值优惠</b>
          </template>
      
          <template #value>
            
          <span>1个可用</span>
            <van-icon name="arrow" />
          </template>
    
        </van-cell>
        <van-cell v-show="show">
          <template #title>
            <p>使用优惠券</p>
          </template>
          <span>6个可用</span>
            <van-icon name="arrow" />
        </van-cell>
        <van-cell title="支付方式">
          
            支付宝支付
            <van-icon name="arrow" />
          
        </van-cell>
        <van-cell title="备注特殊要求" class="paybei">
        <template #value>
    
          <van-icon name="arrow" />
        </template>
      </van-cell>
      </van-cell-group>
  
  
      <!-- 协议模块 -->
  <div class="agree">
    <input type="checkbox" checked>
    <span>我已阅读并同意</span> <a href="#">《支付协议》</a>
    <p>温馨提示:仅支持开具电子发票，订单完成后可前往发票管理中开具</p>
  </div>
  
      
  <!-- 支付模块 -->
  <div class="nodepay">
   
    <p>还需支付<span> ￥0</span></p>
    <button @click="gobuy">去支付</button>
  </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import router from '@/router/index'
  import {useConfirm} from '@/hooks/useconfirm'
  import { usePayStore } from '@/store/goPay'
const stores = usePayStore()

//总价计算
const total = stores.orderData.reduce((prev, item) => {
  return prev + item.goods_price * item.goods_num
}, 0)
   //判断自提或者外送进行跳转高亮
  const flag = ref(1);
  const flag1 = () => {
    flag.value = 1
  }
   const flag2 = () => {
    flag.value = 2
    router.push('/providehome')
  }
//hooks公用组件
const {time,checked,show,Discount,gobuy} = useConfirm()

  </script>
  
  <style lang="scss" scoped>
  
  //头部
  .van-nav-bar {
    position: sticky;
    top: 0;
  }
  //自提和外送
  .myshlf {
    height: 80px;
    margin-bottom: 5px;
  
    .shlf {
      border: 1px solid #88afd5;
      width: 90px;
      height: 36px;
      border-radius: 18px;
      text-align: center;
      margin-top: 20px;
  
      button {
        display: inline-block;
        font-size: 12px;
        margin-top: 3px;
        width: 44px;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        border: none;
        background-color: #fff;
  
      }
  
      .active {
        background-color: #88afd5;
        color: #fff;
      }
  
  
    }
  
    .shlfone {
      margin-top: 15px;
      height: 45px;
  
      p {
        height: 19px;
        font-size: 13px;
        color: #000;
        font-weight: 900;
  
        
      }
  
      span {
        display: inline-block;
      }
  
      .van-count-down {
        display: inline-block;
        font-size: 20px;
        color: #88afd5;
        font-weight: 900;
      }
    }
  }
  
  
  //配送信息
  .Delivery {
  
  margin-bottom: 5px;
  
  .Deliveryordertwo {
    h2{
      font-size: 14px;
      margin-left: 15px;
      line-height: 30px;
    }
      .Deliveryorder {
      display: flex;
      justify-content: space-between;
      margin:5px 18px;
  
      span {
        font-size: 15px;
        font-weight: 900;
        color: #000;
        
        i {
          display: block;
          font-size: 10px;
          color: #ccc;
          
        }
      }
      b{
        font-size: 13px;
        line-height: 30px;
      }
    }
  
    
  }
  
  //合计内容
  .total {  
      span {
        font-weight: 900;
        font-size: 16px;
        color: #000;
      }
    }
  }
  
  
  //优惠
  .pay {
    background-color: rgb(237, 237, 237);
  
    .van-cell {
      height: 50px;
      font-size: 14px;
      line-height: 30px;
  
      p {
        color: #88afd5;
        display: inline-block;
      }
  
      b {
  
        width: 40px;
        height: 16px;
        border-radius: 2px;
        background-color: #ff8102;
        color: #fff;
        font-size: 8px;
        margin-left: 5px;
      }
  
      span {
        color: #ff8102;
      }
    }
  
    .paybei {
      margin-top: 5px;
    }
  }
  
  //支付
  .nodepay {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    font-weight: 900;
  
    p {
      margin-left: 15px;
      font-size: 14px;
      line-height: 60px;
  
      span {
        font-size: 24px;
      }
  
    }
  
    button {
      width: 120px;
      height: 60px;
      border: none;
      background-color: #88afd5;
      color: #fff;
  
    }
  
  }
  //协议
  .agree {
    height: 40px;
    margin-bottom: 60px;
    font-size: 8px;
  
    p {
      margin-left: 2px;
    }
  }
  </style>